<template>
	<view class="body">
		<!-- 搜索组件 -->
		<return-search @searchResult="getData" placeholder="搜索我的关注"></return-search>
		<view style="background: #ffffff;margin-top: 10px">
			<scroll-view scroll-y enhanced refresher-enabled @refresherrefresh="refresherrefreshHandle"
				:refresher-triggered="pullDownState" @scrolltolower="groundingHandle" lower-threshold="500"
				:style="{height:contentHeight + 'px'}" :show-scrollbar="false" class="content">
				<!-- 用户列表组件 -->
				<view class="userListBox" v-if="userList.length !== 0 && !searchState && !pullDownState">
					<view v-for="item in userList" :key="item.userId" class="userForItem">
						<user-item @changeUserFansState="changeUserFansStateHandle()" :type="0" :userObj="item">
						</user-item>
					</view>
				</view>
				<scroll-loading :pullDownState="pullDownState" :requestState="requestState" :pagingState="pagingState"
					:dataList="userList" :pageNumber="pageNumber" :totalPageNumber="totalPageNumber"
					:searchDataState="searchDataState" :search="true" text="暂无关注" searchText="没有找到该用户">
				</scroll-loading>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		searchContentHeight
	} from "../../mixins/mixins.js"
	export default {
		mixins: [searchContentHeight],
		data() {
			return {
				// 用户关注列表
				userList: [],
				// 当前请求的页数
				pageNumber: 1,
				// 总页数
				totalPageNumber: 0,

				// 当前刷新状态
				pullDownState: false,
				// 请求节流阀
				requestState: false,
				// 搜索状态
				searchState: false,
				// 分页加载状态
				pagingState: false,
				// 是否为搜索的数据
				searchDataState: false,
				// 查询参数
				queryData: null
			};
		},
		// 显示界面的时候调用数据
		created() {
			this.searchState = true
			this.getUserList()
		},
		mounted() {
			this.$pubsub.subscribe("userInfoAmendFansState", (_, data) => {
				const {
					id,
					fansState
				} = data
				this.changeUserFansStateHandle(id, fansState)
			})
		},
		methods: {
			// 获取用户关注列表数据
			async getUserList() {
				this.requestState = true
				const userObj = uni.getStorageSync("userObj") || {}
				const {
					data: result
				} = await uni.$http.get(`/ym_server/fans/queryFans/0?page=${this.pageNumber}`)
				if (result.code === 200) {
					this.totalPageNumber = result.data.fansList.pages
					this.userList = [...this.userList, ...result.data.fansList.records]
				} else {
					this.pageNumber--
					uni.showToast({
						title: "网络异常，稍后重试！",
						icon: "none"
					})
				}
				this.pullDownState = false
				this.requestState = false
				this.pagingState = false
				this.searchState = false
				this.searchDataState = false
			},
			// 根据参数模糊查询用户关注列表
			async getData(query) {
				this.queryData = query
				this.userList = []
				this.pageNumber = 1
				this.totalPageNumber = 0
				this.pullDownState = false
				this.requestState = false
				this.pagingState = false
				if (query == '') {
					this.searchState = true
					this.getUserList()
				} else {
					this.requestState = true
					this.searchState = true
					const {
						data: result
					} = await uni.$http.get("ym_server/fans/QueryFans/0?content=" + query)
					if (result.code === 200) {
						this.userList = result.data.list
					}
					this.requestState = false
					this.searchState = false
					this.searchDataState = true
				}
			},
			// 分页加载
			groundingHandle() {
				if (this.requestState) return
				if (this.pageNumber < this.totalPageNumber) {
					this.pagingState = true
					this.pageNumber++
					this.getUserList()
				}
			},
			// 下拉刷新
			async refresherrefreshHandle() {
				if (this.requestStatus || this.pullDownState) return
				this.pullDownState = true
				this.requestState = true
				this.userList = []
				this.pageNumber = 1
				this.totalPageNumber = 0
				this.searchState = false
				this.pagingState = false
				if (this.searchDataState) {
					const {
						data: result
					} = await uni.$http.get("ym_server/fans/QueryFans/0?content=" + this.queryData)
					if (result.code === 200) {
						this.userList = result.data.list
					}
					this.requestState = false
					this.searchState = false
					this.searchDataState = true
					this.pullDownState = false
				} else {
					this.getUserList()
				}
			},
			// 用户关注状态改变事件
			async changeUserFansStateHandle(id, fansState) {
				const item = this.userList.find(item => item.userId == id)
				item.fansState = !fansState
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 整个大背景，最小高度为整个屏幕
	.body {
		width: 100%;
		min-height: 100vh;
		background: #eef2f4;

		.content {
			width: 100%;

			.userListBox {
				width: 100%;

				.userForItem {
					width: 100%;
					padding: 32upx;
					box-sizing: border-box;
					border-bottom: 1px solid #D1D1D1;
					
					&:last-child{
						margin-bottom: 32upx;
					}
				}
			}
		}
	}
</style>
